/*
  page.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
  ArrowLeft,
  ArrowRight,
  CalendarDays,
  Clock,
  Mail,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { BlogContent } from "@/components/blog-content";
import { Reveal } from "@/components/reveal";
import { getBlogPost, getBlogPosts, getBlogSlugs } from "@/lib/blog";

interface PageProps {
  params: Promise<{ slug: string }>;
}

export function generateStaticParams() {
  return getBlogSlugs().map((slug) => ({ slug }));
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const post = getBlogPost(slug);
  if (!post) return {};
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.date,
      authors: ["Simon-Pierre Boucher"],
    },
  };
}

function AuthorSignature({ compact = false }: { compact?: boolean }) {
  return (
    <div className="flex items-center gap-4">
      <Image
        src="/profile/simon-pierre-boucher.jpeg"
        alt="Portrait of Simon-Pierre Boucher"
        width={96}
        height={96}
        className={`${compact ? "h-11 w-11" : "h-14 w-14"} rounded-full object-cover object-top ring-2 ring-primary/20`}
      />
      <div className="min-w-0">
        <p className="font-display text-sm font-semibold tracking-tight">
          Simon-Pierre Boucher
        </p>
        {!compact && (
          <p className="text-xs text-muted-foreground">
            Professor — Department of Administrative Sciences, UQO
          </p>
        )}
        <a
          href="mailto:contact@spboucher.ai"
          className="mt-0.5 inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-primary"
        >
          <Mail className="h-3 w-3" aria-hidden="true" />
          contact@spboucher.ai
        </a>
      </div>
    </div>
  );
}

export default async function BlogPostPage({ params }: PageProps) {
  const { slug } = await params;
  const post = getBlogPost(slug);
  if (!post) notFound();

  const posts = getBlogPosts();
  const index = posts.findIndex((p) => p.slug === slug);
  const previous = index > 0 ? posts[index - 1] : undefined;
  const next = index < posts.length - 1 ? posts[index + 1] : undefined;

  return (
    <article className="mx-auto max-w-3xl px-4 py-16 sm:px-6">
      <Reveal>
        <Link
          href="/blog"
          className="inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
        >
          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
          All essays
        </Link>
      </Reveal>

      {/* Header */}
      <Reveal className="mt-8">
        <header>
          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs font-medium text-muted-foreground">
            <Badge>Essay</Badge>
            <span className="inline-flex items-center gap-1.5">
              <CalendarDays
                className="h-3.5 w-3.5 text-primary/70"
                aria-hidden="true"
              />
              {post.dateLabel}
            </span>
            <span className="inline-flex items-center gap-1.5">
              <Clock className="h-3.5 w-3.5 text-primary/70" aria-hidden="true" />
              {post.readingMinutes} min read
            </span>
            <span className="flex flex-wrap gap-1.5">
              {post.tags.map((tag) => (
                <Badge key={tag} variant="outline">
                  {tag}
                </Badge>
              ))}
            </span>
          </div>
          <h1 className="mt-5 font-display text-3xl font-bold leading-tight tracking-tight sm:text-[2.75rem] sm:leading-[1.15]">
            {post.title}
          </h1>
          <div className="mt-7 border-y border-border/60 py-4">
            <AuthorSignature compact />
          </div>
        </header>
      </Reveal>

      {/* Body */}
      <Reveal delay={0.08} className="mt-10">
        <BlogContent blocks={post.blocks} />
      </Reveal>

      {/* Signature */}
      <Reveal className="mt-14">
        <footer className="border-y-2 border-foreground bg-card/50 p-6 sm:p-8">
          <p className="flex items-center gap-3 font-mono text-[0.68rem] font-medium uppercase tracking-[0.22em] text-primary">
            <span aria-hidden="true" className="h-px w-6 bg-primary/60" />
            Written by
          </p>
          <div className="mt-4">
            <AuthorSignature />
          </div>
        </footer>
      </Reveal>

      {/* Prev / next */}
      {(previous || next) && (
        <Reveal className="mt-8">
          <nav
            aria-label="More essays"
            className="grid gap-3 sm:grid-cols-2"
          >
            {previous ? (
              <Link
                href={`/blog/${previous.slug}`}
                className="group rounded-3xl border border-border/60 bg-card/70 p-5 shadow-[var(--shadow-soft)] transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/25"
              >
                <span className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground">
                  <ArrowLeft className="h-3.5 w-3.5" aria-hidden="true" />
                  Previous essay
                </span>
                <p className="mt-2 font-display text-sm font-semibold leading-snug tracking-tight transition-colors group-hover:text-primary">
                  {previous.title}
                </p>
              </Link>
            ) : (
              <span aria-hidden="true" />
            )}
            {next && (
              <Link
                href={`/blog/${next.slug}`}
                className="group rounded-3xl border border-border/60 bg-card/70 p-5 text-right shadow-[var(--shadow-soft)] transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/25"
              >
                <span className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground">
                  Next essay
                  <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
                </span>
                <p className="mt-2 font-display text-sm font-semibold leading-snug tracking-tight transition-colors group-hover:text-primary">
                  {next.title}
                </p>
              </Link>
            )}
          </nav>
        </Reveal>
      )}
    </article>
  );
}